<template>
  <div class="element-form">
    <component :is="currentForm" />
  </div>
</template>

<script>
  import ButtonForm from './components/ButtonForm'
  import ImageForm from './components/ImageForm'
  import VideoForm from './components/VideoForm'
  import mixin from '@/views/editor/mixin.js'

  export default {
    name: 'ElementForm',
    components: {
      ButtonForm,
      ImageForm,
      VideoForm,
    },
    mixins: [mixin],
    data() {
      return {
        root: {
          dom: {
            type: 'button',
          },
        },
      }
    },
    computed: {
      dom() {
        return this.root.dom
      },
      currentForm() {
        return `${this.dom ? this.dom.type : 'button'}-form`
      },
    },
  }
</script>

<style scoped>
  .element-form {
    width: 230px;
    position: absolute;
    min-height: 100%;
    background-color: #fff;
    padding: 15px 0;
    box-sizing: border-box;
  }
</style>
